<template>
  <div class="wrap">
    <div class="wrap-top flex">
      <el-select v-model="form.template">
        <el-option v-for="item in templateList" :key="item.value" :label="item.name" :value="item.value"></el-option>
      </el-select>
      <el-select v-model="form.lang">
        <el-option v-for="item in data.langList" :key="item.value" :label="item.name" :value="item.value"></el-option>
      </el-select>
      <p class="add font-14 pointer" @click="toDetail(null)">创建模板</p>
    </div>
    <el-tabs v-model="form.type" class="tabs" @tab-click="tabChange">
      <el-tab-pane v-for="item in typeList" :key="item.value" :label="item.name" :name="item.value"></el-tab-pane>
    </el-tabs>
    <div class="list">
      <div v-for="item in list" :key="item.id" class="item flex-between">
        <div class="item-left">
          <p class="item-name ellipsis-1 font-14-B">{{ item.templateName }}</p>
          <p class="item-desc font-12">应用场景：{{ item.scene }}</p>
          <p class="item-desc font-12">更新于{{ item.time }}</p>
        </div>
        <div class="item-right flex-between flex-column">
          <p class="to-detail font-12 pointer flex flex-align-items-center" @click="toDetail(item)">
            详情<i class="iconfont icon-a-jiantou-you"></i>
          </p>
          <p class="item-btn font-14 pointer" @click="checkHandleClick(item)">应用</p>
        </div>
      </div>
    </div>
    <div class="pagination flex flex-align-items-center">
      <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total" :total="form.total" />
    </div>
  </div>

  <edit-template v-if="editTemplateInfo.show" :info="editTemplateInfo" @close="editTemplateInfo.show = false"></edit-template>
</template> 
<script setup>
import EditTemplate from './editTemplate.vue';
import { defineEmits, ref } from 'vue';
import data from '@/js/data.js';

const emit = defineEmits(['change']);

const templateList = [
  {
    name: '系统模板',
    value: 1
  },
  {
    name: '自定义模板',
    value: 2
  }
];
const typeList = [
  {
    name: '合作要求',
    value: 1
  },
  {
    name: '价格协商',
    value: 2
  },
  {
    name: '合同模板',
    value: 3
  },
  {
    name: '视频制作',
    value: 4
  },
  {
    name: '费用结算',
    value: 5
  }
];

const form = ref({
  type: 1,
  total: 100
});
const list = ref([
  {
    templateName: '第一阶段，首次邀约【有预算】',
    emailName: 'xxxxx',
    content: 'xxxxxx',
    time: '2023-12-18',
    scene: 'xxx',
    lang: 1,
    id: 1
  }
]);
const editTemplateInfo = ref({
  show: false
});

const tabChange = () => {
}
const toDetail = e => {
  if (e) {
    editTemplateInfo.value = {
      show: true,
      ...e
    }
  } else {
    editTemplateInfo.value = {
      show: true
    }
  }
}
const checkHandleClick = e => {
  emit('change', e);
}
</script>

<style lang="less" scoped>
.wrap {
  height: 100%;
  padding: 0 24px;
  position: relative;

  .wrap-top {
    margin-bottom: 24px;

    &::v-deep {
      .el-select {
        width: 110px;
        height: 32px;
        margin-right: 16px;
      }
    }

    .add {
      width: 72px;
      height: 32px;
      border-radius: 2px;
      background: @main-color;
      color: #fff;
      text-align: center;
      line-height: 32px;
    }
  }

  .tabs {
    margin-bottom: 24px;

    &::v-deep {
      .el-tabs__item {
        font-size: 12px !important;

        &.is-active {
          color: @main-color !important;
        }

        &:not(.is-active):hover {
          color: @main-color !important;
        }
      }

      .el-tabs__active-bar {
        background: @main-color !important;
      }
    }
  }

  .list {
    height: calc(100% - 135px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 0;
    }

    .item {
      height: 112px;
      padding: 16px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
      border-radius: 2px;
      margin-bottom: 16px;

      .item-left {
        width: 185px;
        height: 80px;

        .item-name {
          color: #333;
          margin-bottom: 16px;
        }

        .item-desc {
          color: #666;
          margin-bottom: 8px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      .item-right {
        .to-detail {
          justify-content: end;
          color: #666;

          i {
            color: #666;
            margin-left: 5px;
            font-size: 12px;
          }
        }

        .item-btn {
          width: 62px;
          height: 32px;
          text-align: center;
          line-height: 32px;
          background: @main-color;
          color: #fff;
          border-radius: 2px;
        }
      }
    }
  }

  .pagination {
    position: absolute;
    left: 0;
    bottom: -88px;
    width: 100%;
    height: 64px;
    justify-content: end;
    padding-right: 24px;
  }
}
</style>